<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>点击播放对应音频</title>  
<style>  
  .audio-control {  
    cursor: pointer; /* 显示为可点击状态 */  
  }  
</style>  
</head>  
<body>  
  
<p class="audio-control" data-audio="audio1">单击播放第一段音频</p>  
<audio id="audio1" src="MP3\1.MP3" preload="auto"></audio>  
  
<p class="audio-control" data-audio="audio2">单击播放第二段音频</p>  
<audio id="audio2" src="MP3\1.MP3" preload="auto"></audio>  
  
<p class="audio-control" data-audio="audio3">单击播放第三段音频</p>  
<audio id="audio3" src="MP3\1.MP3" preload="auto"></audio>  
  
<script>  
var currentAudio; // 当前播放的音频元素  
  
// 获取所有的音频控制元素  
var audioControls = document.querySelectorAll('.audio-control');  
  
audioControls.forEach(function(control) {  
  control.addEventListener('click', function(event) {  
    var audioId = this.getAttribute('data-audio'); // 获取对应的音频ID  
    var audioElement = document.getElementById(audioId); // 获取音频元素  
      
    // 停止当前播放的音频（如果有）  
    if (currentAudio && currentAudio !== audioElement) {  
      currentAudio.pause();  
      currentAudio.currentTime = 0; // 重置音频位置到开头  
    }  
      
    // 如果点击的是当前播放的音频，则停止它；否则播放新音频  
    if (currentAudio === audioElement) {  
      audioElement.pause();  
      //this.textContent = '单击播放' + this.textContent.slice(7); // 恢复文本为“单击播放音频”  
      currentAudio = null; // 清除当前音频  
    } else {  
      audioElement.currentTime = 0; // 将音频时间重置为0秒  
      audioElement.play();  
      //this.textContent = '单击停止' + this.textContent.slice(5); // 修改文本为“单击停止播放音频”  
      currentAudio = audioElement; // 设置当前音频  
    }  
  });  
  
  control.addEventListener('dblclick', function(event) {  
    var audioId = this.getAttribute('data-audio'); // 获取对应的音频ID  
    var audioElement = document.getElementById(audioId); // 获取音频元素  
      
    // 停止当前播放的音频（如果有）  
    if (currentAudio && currentAudio !== audioElement) {  
      currentAudio.pause();  
      currentAudio.currentTime = 0; // 重置音频位置到开头  
    }  
      
    // 双击时播放新音频或重新播放当前音频  
    audioElement.currentTime = 0; // 将音频时间重置为0秒  
    audioElement.play();  
    //this.textContent = '单击停止' + this.textContent.slice(5); // 修改文本为“单击停止播放音频”  
    currentAudio = audioElement; // 设置当前音频  
  });  
});  
</script>  
  
</body>  
</html>